{% extends "tools/base_tool.html" %}

{% block extra_head %}
<!-- 引入QRCode.js库 -->
<script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html-to-image@1.11.11/dist/html-to-image.min.js"></script>
<link rel="stylesheet" href="/static/css/qrcode-generator.css">
{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row">
        <div class="col-lg-6">
            <!-- 基本设置 -->
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">{{ get_text('basic_settings', current_language) }}</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="qrContent" class="form-label">{{ get_text('qr_content', current_language) }}</label>
                        <textarea id="qrContent" class="form-control" rows="3" placeholder="https://example.com"></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="qrSize" class="form-label">{{ get_text('size_pixels', current_language) }}</label>
                        <div class="d-flex align-items-center">
                            <input type="range" class="form-range flex-grow-1" id="qrSize" min="100" max="500" value="200">
                            <span class="ms-2" id="qrSizeValue">200</span>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="qrMargin" class="form-label">{{ get_text('margin_pixels', current_language) }}</label>
                        <div class="d-flex align-items-center">
                            <input type="range" class="form-range flex-grow-1" id="qrMargin" min="0" max="50" value="10">
                            <span class="ms-2" id="qrMarginValue">10</span>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ get_text('dot_style', current_language) }}</label>
                        <div class="d-flex">
                            <button class="btn btn-primary me-2" id="dotStyleSquare">{{ get_text('square', current_language) }}</button>
                            <button class="btn btn-outline-primary" id="dotStyleRound">{{ get_text('round', current_language) }}</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 颜色设置 -->
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">{{ get_text('color_settings', current_language) }}</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="bgColor" class="form-label">{{ get_text('background_color', current_language) }}</label>
                        <div class="d-flex align-items-center">
                            <input type="color" class="form-control form-control-color me-2" id="bgColor" value="#FFFFFF">
                            <input type="text" class="form-control" id="bgColorText" value="#FFFFFF">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="fgColor" class="form-label">{{ get_text('foreground_color', current_language) }}</label>
                        <div class="d-flex align-items-center">
                            <input type="color" class="form-control form-control-color me-2" id="fgColor" value="#000000">
                            <input type="text" class="form-control" id="fgColorText" value="#000000">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="eyeColor" class="form-label">{{ get_text('eye_color', current_language) }}</label>
                        <div class="d-flex align-items-center">
                            <input type="color" class="form-control form-control-color me-2" id="eyeColor" value="#000000">
                            <input type="text" class="form-control" id="eyeColorText" value="#000000">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="eyeRadius" class="form-label">{{ get_text('eye_radius', current_language) }}</label>
                        <div class="d-flex align-items-center">
                            <input type="range" class="form-range flex-grow-1" id="eyeRadius" min="0" max="50" value="0">
                            <span class="ms-2" id="eyeRadiusValue">0%</span>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ get_text('preset_colors', current_language) }}</label>
                        <div class="row row-cols-2 row-cols-md-4 g-2">
                            <div class="col">
                                <button class="btn btn-outline-dark w-100 preset-color" data-bg="#FFFFFF" data-fg="#000000" data-eye="#000000">{{ get_text('preset_classic', current_language) }}</button>
                            </div>
                            <div class="col">
                                <button class="btn btn-outline-primary w-100 preset-color" data-bg="#FFFFFF" data-fg="#0275d8" data-eye="#0275d8">{{ get_text('preset_business', current_language) }}</button>
                            </div>
                            <div class="col">
                                <button class="btn btn-outline-danger w-100 preset-color" data-bg="#FFFFFF" data-fg="#d9534f" data-eye="#d9534f">{{ get_text('preset_red', current_language) }}</button>
                            </div>
                            <div class="col">
                                <button class="btn btn-outline-info w-100 preset-color" data-bg="#FFFFFF" data-fg="#5bc0de" data-eye="#5bc0de">{{ get_text('preset_green', current_language) }}</button>
                            </div>
                            <div class="col">
                                <button class="btn btn-outline-primary w-100 preset-color" data-bg="#f8f9fa" data-fg="#007bff" data-eye="#007bff">{{ get_text('preset_tech', current_language) }}</button>
                            </div>
                            <div class="col">
                                <button class="btn btn-outline-dark w-100 preset-color" data-bg="#343a40" data-fg="#f8f9fa" data-eye="#f8f9fa">暗黑模式</button>
                            </div>
                            <div class="col">
                                <button class="btn btn-outline-warning w-100 preset-color" data-bg="#ffffff" data-fg="#fd7e14" data-eye="#fd7e14">橙色点缀</button>
                            </div>
                            <div class="col">
                                <button class="btn btn-outline-secondary w-100 preset-color" data-bg="#ffffff" data-fg="#6c4a3f" data-eye="#6c4a3f">温暖棕</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Logo设置 -->
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">Logo设置</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <div class="d-flex justify-content-between">
                            <button class="btn btn-primary" id="uploadLogo">
                                <i data-feather="upload"></i> 上传Logo
                            </button>
                            <button class="btn btn-danger hidden" id="removeLogo">
                                <i data-feather="trash-2"></i> 移除
                            </button>
                        </div>
                        <input type="file" id="logoInput" accept="image/*" class="hidden">
                    </div>
                    <div id="logoSettings" class="hidden">
                        <div class="text-center mb-3" id="logoPreview">
                            <img src="" alt="Logo预览" class="img-fluid img-preview">
                        </div>
                        <div class="mb-3">
                            <label for="logoWidth" class="form-label">Logo宽度 (像素)</label>
                            <div class="d-flex align-items-center">
                                <input type="range" class="form-range flex-grow-1" id="logoWidth" min="20" max="150" value="60">
                                <span class="ms-2" id="logoWidthValue">60</span>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="logoHeight" class="form-label">Logo高度 (像素)</label>
                            <div class="d-flex align-items-center">
                                <input type="range" class="form-range flex-grow-1" id="logoHeight" min="20" max="150" value="42">
                                <span class="ms-2" id="logoHeightValue">42</span>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="logoOpacity" class="form-label">Logo透明度</label>
                            <div class="d-flex align-items-center">
                                <input type="range" class="form-range flex-grow-1" id="logoOpacity" min="10" max="100" value="100">
                                <span class="ms-2" id="logoOpacityValue">100%</span>
                            </div>
                        </div>
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="removeQrBehindLogo" checked>
                            <label class="form-check-label" for="removeQrBehindLogo">
                                移除Logo后方的二维码
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <!-- 预览 -->
            <div class="card mb-4">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">预览</h5>
                    <div>
                        <button class="btn btn-light btn-sm" id="copyQrCode" title="复制二维码">
                            <i data-feather="copy"></i>
                        </button>
                        <button class="btn btn-light btn-sm" id="downloadQrCode" title="下载二维码">
                            <i data-feather="download"></i>
                        </button>
                        <button class="btn btn-light btn-sm" id="resetSettings" title="重置设置">
                            <i data-feather="refresh-cw"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body text-center">
                    <div id="qrCodePreview" class="d-inline-block p-3 rounded preview-container">
                        <!-- 二维码将在这里显示 -->
                    </div>
                </div>
            </div>

            <!-- 使用说明 -->
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">使用说明</h5>
                </div>
                <div class="card-body">
                    <ol>
                        <li>输入需要生成二维码的内容，支持网址、文本等</li>
                        <li>通过右侧控制面板调整二维码的样式、颜色等参数</li>
                        <li>可以上传Logo图片并设置其大小和透明度</li>
                        <li>点击下载按钮保存生成的二维码图片</li>
                    </ol>
                    <p class="text-muted">注意：内容过长可能影响二维码识别率，建议使用简短链接</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/qrcode-generator.js"></script>
{% endblock %}